<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>KISSY html Beautifier</title>
</head>
<body>
<h1 style="margin: 10px auto;text-align: center;"> KISSY html Beautifier </h1>
<div style="border: 1px solid red;" id="t">
    <div style="border: 1px solid green;">
        <label>前：
            <textarea id="before" style="width:80%;height: 300px;">
                &lt;div id="name">
                <!--测试 comment-->
                &lt;div>
                &lt;div> test &lt;span>
                test2 &lt;/span> test3 &lt;/div>
                &lt;/div>
                &lt;/div>
            </textarea>
        </label>
        <br/>
        <button id="start">beautify</button>
        <br/>
        <label>后：
            <textarea id="after" style="width:80%;height: 300px;"></textarea>
        </label>
    </div>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>


    KISSY.use("html-parser,core", function (S, HtmlParser) {
        var $ = S.all;
        $("#after").val("");
        var start = $("#start");
        start.on("click", function () {
            var writer = new HtmlParser.BeautifyWriter(),
                    filter = new HtmlParser.Filter(),
                    before = S.trim($("#before").val()),
                    n = new HtmlParser.Parser(before).parse();

            filter.addRules({
                tags:{
                    $:function (el) {
                        S.log("$:  " + el.tagName);
                    }
                },
                text:function (v) {
                    S.log("texts:  " + v);
                },
                comment:function (v) {
                    S.log("comments:  " + v);
                },
                cdata:function (v) {
                    S.log("cdatas:  " + v);
                }
            });
            S.log(n);

            n.writeHtml(writer, filter);

            $("#after").val(writer.getHtml());
        });
    });
</script>
</body>
</html>